import React from 'react';
import PropTypes from 'prop-types';
import Popover from 'material-ui/Popover';
import { xhrClient } from './xhrClient';
import Upgrade from '../payment';
import _ from 'underscore';
import IconButton from 'material-ui/IconButton';
import { showAlert } from '../../actions/index';
import moment from 'moment';

// css
require('./styles.css');

class Notifications extends React.Component {
  static propTypes = {
    notifications: PropTypes.any,
    updateNotificationsSeen: PropTypes.any,
    handleNotificationResponse: PropTypes.any
  }
  constructor (props) {
    super(props);
    this.state = {
      open: false,
      notifications: [],
      showUpgradeModal: false
    };
  }

    componentWillMount = () => this.setState({ notifications: this.props.notifications });

    componentWillReceiveProps (nextProps) {
      if (nextProps.notifications !== this.props.notifications) {
        this.setState({ notifications: nextProps.notifications });
      }
    }

    handleTouchTap = (event) => {
      event.preventDefault();
      this.setState({ open: true, anchorEl: event.currentTarget });
    };

    clearNotifications = () => this.props.updateNotificationsSeen();

    handleRequestClose = () => this.setState({ open: false });

    closeUpgradeModal = () => this.setState({ showUpgradeModal: false });

    handleNotificationResponse = (type) => this.props.handleNotificationResponse(type);

    callAction = (data, obj) => () => {
      let { meta } = obj;
      let { url, method, payload, external } = data;
      let thisObj = this;

      if (meta.notificationType === 'payment') {
        this.setState({ showUpgradeModal: true, appId: data.appId, planId: data.planId, open: false });
      } else if (!external) {
        xhrClient({ url: url, method: method, data: payload })
          .then(function (res) {
            thisObj.props.handleNotificationResponse(meta.notificationType, obj._id);
          }, function (err) {
            console.log(err);
            showAlert('error', err);
          });
      } else { window.open(url, '_blank'); }
    }

    deleteNotification = id => () => this.props.handleNotificationResponse('delete', id);

    render () {
      let { notifications } = this.state;

      let pendingTasks = notifications.length;
      let unSeenNotifications = _.where(notifications, { seen: false }).length;

      let notificationDiv = notifications.map((x, i) => {
        let cancelButton = null;
        let acceptButton = null;
        if (x.meta) {
          cancelButton = x.meta.cancelButton;
          acceptButton = x.meta.acceptButton;
        }

        let getTime = (x) => {
          let notTime = moment(x.date);
          let secs = moment().diff(notTime, 'seconds');
          return (secs > 172800) ? notTime.format('Do MMMM') : moment.duration(secs, 'seconds').humanize() + ' ago';
        };

        return (
          <div className={x.seen ? 'notificationdiv' : 'notificationdiv unSeenNotification'} key={i}>
            <div className='notimgcontainer'>
              {
                x.icon
                  ? <img src={x.icon} className='notinvicon' />
                  : <i className='ion ion-ios-bell notinvicon' />
              }
            </div>
            <div className='notdatacontainer'>
              <p className='nottextinv' dangerouslySetInnerHTML={{ __html: x.text }} />
              <div className='noteinvbtncontainer'>
                <span className='nottimestamp'> { getTime(x) } </span>
                {
                  cancelButton &&
                    <button className='cancelbtnnotinv'
                      onClick={this.callAction(cancelButton, x)}>
                      {cancelButton.text}
                    </button>
                }
                {
                  acceptButton &&
                    <button className='acceptbtnnotinv'
                      onClick={this.callAction(acceptButton, x)}>
                      {acceptButton.text}
                    </button>
                }
                {
                  x.notificationType === 'inform' &&
                    <button className='acceptbtnnotinv'
                      onClick={this.deleteNotification(x._id)}>
                                    Okay
                    </button>
                }
              </div>
            </div>
          </div>
        );
      });

      return (
        <div>
          {
            this.state.showUpgradeModal &&
              <Upgrade appId={this.state.appId}
                planId={this.state.planId}
                show={this.state.showUpgradeModal}
                close={this.closeUpgradeModal} />
          }
          <IconButton touch onTouchTap={this.handleTouchTap}>

            { unSeenNotifications && <div className='red-dot' /> }

            <svg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 -3 26 26'>
              <g fill='none' fillRule='evenodd'>
                <path fill='#AAB7C4'
                  d='M7.65 16.914A2.721 2.721 0 0 0 10.298 19c1.282 0 2.36-.886 2.647-2.086H7.65zm7.917-8.129a50.014 50.014 0 0 1-.45-2.963c-.242-2.031-2.076-3.56-4.246-3.56h-.86c-2.17 0-4.004 1.529-4.245 3.56a47.54 47.54 0 0 1-.451 2.963c-.42 2.314-1.342 3.98-2.097 5.11-.576.859.053 1.98 1.133 1.82h12.117c1.08.16 1.72-.961 1.133-1.82-.85-1.256-1.657-3.026-2.034-5.11zm-5.137-6.69a1.048 1.048 0 1 0 .002-2.096 1.048 1.048 0 0 0-.002 2.095z' />
              </g>
            </svg>
          </IconButton>

          <Popover open={this.state.open}
            anchorEl={this.state.anchorEl}
            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
            targetOrigin={{ horizontal: 'right', vertical: 'top' }}
            onRequestClose={this.handleRequestClose}
            className='popovernotifications'>

            <p className='headingpop'>Notifications
              <button className={pendingTasks ? 'clearnotbtn' : 'hide'}
                onClick={this.clearNotifications}>
                            Mark All as read
              </button>
            </p>
            {
              !pendingTasks
                ? <div style={{ textAlign: 'center' }}>
                  <i className='ion-ios-bell notificationemptybell' />
                  <p className='notificationemptymessage'>
                                    We'll let you know when we've got something new for you!
                  </p>
                </div>
                : <div className='notification-wrap'>{notificationDiv}</div>
            }
          </Popover>
        </div>
      );
    }
}

export default Notifications;
